<template>
  <div class="playlist-detail">
    <!-- 132465 -->
    <div class="pic">
      <van-icon name="arrow-left" @click="goBack" />
      <!-- <van-image :src="picUrl" fit="cover"></van-image> -->
      <h2>{{ title }}</h2>
      <div class="pic_header">
        <img :src="picUrl" alt="" name="play" />
        <span>{{ rcmdText }}</span>
      </div>
      <div class="synopsis">
        <span> {{ desc }}</span>
      </div>
    </div>
    <div class="programs">
      <ul>
        <li v-for="item in programs" :key="item.id" @click="selectSong(item)">
          <img :src="item.coverUrl" alt="" />
          <div class="con_left">
            <h4>{{ item.name }}</h4>
            <div class="cont">
              <span>
                <van-icon name="underway-o" /> {{ item.createTime | numFilter(0) }}
              </span>
              <span> <van-icon name="play-circle-o" /> {{ item.listenerCount }} </span>
              <span> <van-icon name="like-o" /> {{ item.likedCount }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      programs: [],
      picUrl: "",
      title: "",
      test: "",
      rcmdText: "",
      desc: "",
      // picUrl: "",
    };
  },
  created() {
    this.getData();
    this.gerDetail();
  },
  methods: {
    gerDetail() {
      axios
        .get("/api/dj/detail", {
          params: {
            rid: this.$route.params.id,
          },
        })
        .then((res) => {
          // console.log("1");
          console.log(res);
          this.title = res.data.data.name;
          this.rcmdText = res.data.data.rcmdText;
          this.picUrl = res.data.data.picUrl;
          this.desc = res.data.data.desc;

          // console.log(res.data.playlist);
          console.log(res.data.programs);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getData() {
      axios
        .get("/api/dj/program", {
          params: {
            rid: this.$route.params.id,
          },
        })
        .then((res) => {
          // console.log("1");
          console.log(res);

          console.log(res.data.programs);
          this.programs = res.data.programs;
          // this.coverUrl = res.data.programs[1].coverUrl;
          // this.title = res.data.programs[0].name;
          // this.test = res.status;
        })
        .catch((err) => {
          console.error(err);
        });
    },

    // selectSong(item) {
    //   this.$store.commit("setSinger", item);
    //   const id = item.id;
    //   this.$router.push({
    //     path: `/player/${id}`,
    //   });
    // },

    goBack() {
      let that = this;
      that.$router.go(-1);
    },
  },
  filters: {
    numFilter(value, num) {
      // 先把传参毫秒转化为new Date()
      console.log(num);
      const dt = new Date(value);
      // console.log(dt);
      // const y = dt.getFullYear();
      // 月份是从0开始,需要+1。  +''是把数字转化为字符串,padStart(2,'0')是把字符串设置为2位数,不足2位则在开头加'0'
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0");
      // const hh = (dt.getHours() + "").padStart(2, "0");
      // const mm = (dt.getMinutes() + "").padStart(2, "0");
      // const ss = (dt.getSeconds() + "").padStart(2, "0");
      return `${m}-${d}`;
      // return `${y}-${m}-${d}-${hh}:${mm}:${ss}`;
    },
  },
};
</script>

<style scoped>

.pic {
  position: relative;
}

.pic_header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pic_header > img {
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
}
.synopsis {
  display: flex;
  justify-content: center;
  font-size: 12px;
  width: 60vw;
  margin: 20px auto;
  overflow:hidden; /*超出的文本隐藏 */
  text-overflow:ellipsis; 
  display:-webkit-box; 
  -webkit-box-orient:vertical; 
  -webkit-line-clamp:3;
}
.van-image {
  height: 275px;
  width: 100%;
}

.pic > .van-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  font-size: 40px;
}
.programs > ul > li {
  display: flex;
  justify-content: flex-start;
  margin: 20px 0 20px 7vw;
}

.programs > ul > li > img {
  height: 80px;
  border-radius: 10px;
  margin-right: 20px;
}

.con_left {
  margin-top: 0.5vw;
}
/* .con_left > h4 {
  width: 60%;
} */

.con_left >:nth-of-type(1){
  font-size: 15px;
  width: 70%;
  overflow:hidden; /*超出的文本隐藏 */
  text-overflow:ellipsis; 
  white-space:nowrap; 

  
}

.cont {
  width: 200px;
  display: flex;
  justify-content: space-between;
}
</style>
